<script>
import {onMounted, reactive,toRaw, watch} from "vue"
import lists from './lists.vue'
export default{
    setup(){
        const keepMsg=reactive([])
        const state = reactive({
            workMsg:"",
            willDoArr:[],
            finishArr:[]
        })
        watch(keepMsg,(v)=>{
            v= toRaw(v)
            let willDoArr=[]
            let finishArr=[]
            for(let i=0;i<v.length;i++){               
                if(!v[i].complete){
                    willDoArr.push(v[i])
                }else{
                    finishArr.push(v[i])
                }
            }
            state.willDoArr = willDoArr
            state.finishArr = finishArr
        })
        // 页面创建好后，导入会话中的数据
        onMounted(()=>{
            const result = localStorage.getItem('todolists')
            const res = JSON.parse(result);
            for(let i=0;i<res.length;i++){
                 keepMsg.push(res[i])
            }
        })
        // 点击.inputWork的“添加”按钮，触发addList方法
        const addList =(msgN)=>{
            let msg = msgN.trim();
            state.workMsg = ''
            if(msg==""){
                // 清空msg前后的空白符后为空，不执行添加操作
                alert("请输入文字，数字，字母")
                return
            }else{
                // 获取随机数为id值
                let id = Math.random()*1000000000;
                // 放置的位置，false为“未完成”，true为“完成”
                let complete = false
                // 将数据存放到state中，以便循环
                keepMsg.push({id,complete,msg})
                // 添加到本地存储中
                // localStorage.setItem("todolists",JSON.stringify(toRaw(keepMsg)))
                localKeep(keepMsg);
            }
        }
        // 修改或添加本地存储的方法,local保存的数组
        const localKeep=(local)=>{
            localStorage.setItem("todolists",JSON.stringify(toRaw(local)))
        }
        // 接收子组件的删除事件
        const deleteList =(id)=>{
            for(let i=0;i<keepMsg.length;i++){
                if(keepMsg[i].id==id){
                    keepMsg.splice(i,1);
                }
            }
            // 修改会话
            localKeep(keepMsg);
        }
        // 接收子组件的修改事件
        const outInput =(newMsg,id)=>{
            // console.log(newMsg,id)
            for(let i=0;i<keepMsg.length;i++){
                if(keepMsg[i].id==id){
                    keepMsg[i].msg = newMsg
                }
            }
            // 修改会话
            localKeep(keepMsg);
        }
        // 完成或未完成事件
        const decideWork=(id,complete)=>{
            // console.log(id,complete)
            for(let i=0;i<keepMsg.length;i++){
                if(keepMsg[i].id==id){
                    keepMsg[i].complete = complete
                }
            }
            // 修改会话
            localKeep(keepMsg);
        }
        return{
            state,
            keepMsg,
            addList,
            deleteList,
            outInput,
            decideWork
        }
    },
    components:{
        lists
    }
}

</script>

<template>
    <div class="inputWork">
        请输入您要做的事：<input type="text" v-model="state.workMsg">
        <button @click="addList(state.workMsg)">添加</button>
    </div>
    <div class="willDoWork" title="work">
        <h3>你要做的事情：</h3>
        <ul class="willDoLists" >
            <lists 
            v-for="listMsg in state.willDoArr" 
            :key="listMsg.id"
            :listMsg="listMsg"
            @deleteList="deleteList"
            @outInput="outInput"
            @decideWork="decideWork"
            ></lists>
        </ul>
    </div>
    <div class="finishWork" title="work">
        <h3>已经完成的事情：</h3>
        <ul class="finishLists">
            <lists 
            v-for="listMsg in state.finishArr" 
            :key="listMsg.id"
            :listMsg="listMsg"
            @deleteList="deleteList"
            @outInput="outInput"
            @decideWork="decideWork"
            ></lists>
        </ul>
    </div>
</template>

<style>
    div[title=work]{
        width: 600px;
        height: auto;
        border: 1px solid black;
    }
</style>
